<template>
	<view class="container">
		<Navigator2 :title="$t('setting.title')"></Navigator2>
		<view class="content">
			<!-- 设置选项组 -->
			<view class="settings-group">
				<view class="setting-item" @click="toPrivacyAgreement">
					<text class="label">{{ $t('setting.privacyAgreement') }}</text>
					<image class="arrow" src="/static/me_rightcursor.png"></image>
				</view>
				
				<view class="setting-item">
					<text class="label">{{ $t('setting.language') }}</text>
					<picker class="right-content" :key="$i18n.locale" :value="languageIndex" :range="languageOptions" @change="onLanguageChange">
						<view class="picker-content">
							<text class="value">{{languageOptions[languageIndex]}}</text>
							<image class="arrow" src="/static/me_rightcursor.png"></image>
						</view>
					</picker>
				</view>
				
				<view class="setting-item">
					<text class="label">{{ $t('setting.versionCheck') }}</text>
					<view class="right-content">
						<view class="version-badge">{{ $t('setting.new-version') }}</view>
						<text class="value">V1.12</text>
						<image class="arrow" src="/static/me_rightcursor.png"></image>
					</view>
				</view>
			</view>
			
			<!-- 退出登录按钮 -->
			<view class="logout-section">
				<button class="logout-button" @click="logout">{{ $t('setting.logout') }}</button>
			</view>
		</view>
		
		<!-- 退出登录确认弹框 -->
		<neil-modal 
			:show="showLogoutModal"
			:title="$t('setting.logoutConfirm')"
			:content="$t('setting.logoutContent')"
			:auto-close="false"
			align="center"
			:confirmText="$t('setting.logoutConfirm')"
			:cancelText="$t('setting.logoutCancel')"
			@confirm="confirmLogout"
			@cancel="cancelLogout"
		/>
	</view>
</template>

<script>
	import Navigator2 from '@/components/Navigator2.vue'
	import NeilModal from '@/components/neil-modal/neil-modal.vue'
	export default {
		data() {
			return {
				showLogoutModal: false,
				languageIndex: 0
			}
		},
		computed: {
			languageOptions() {
				return [this.$t('setting.language.zh-Hans'), this.$t('setting.language.en')]
			}
		},
		onShow() {
			const currentLanguage = uni.getStorageSync('currentLanguage')
			console.log('onShow', currentLanguage)
			
			// 兼容多种中文标识
			const isChinese = currentLanguage === 'zh-Hans' || 
							  currentLanguage === 'zh-CN' || 
							  currentLanguage === 'zh' ||
							  currentLanguage.startsWith('zh')
			this.languageIndex = isChinese ? 0 : 1
		},
		methods: {
			logout() {
				this.showLogoutModal = true
			},
			confirmLogout() {
				this.showLogoutModal = false
				uni.removeStorageSync('sy-token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('account')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			cancelLogout() {
				this.showLogoutModal = false
			},
			onLanguageChange(e) {
				console.log('onLanguageChange', e.detail.value)
				this.languageIndex = Number(e.detail.value)
				const locale = this.languageIndex == 0 ? 'zh-Hans' : 'en'
				uni.setLocale(locale)
				this.$i18n.locale = locale
				console.log('uni.setStorageSync', locale)
				uni.setStorageSync('currentLanguage', locale)
				this.$nextTick(() => {
					uni.showToast({
						title: `${this.$t('setting.language.switchTo')} ${this.languageOptions[this.languageIndex]}`,
						icon: 'none'
					})
				})
			},
			toPrivacyAgreement() {
				uni.navigateTo({
					url: '/pages/me/privacyagreement'
				})
			}
		},
		components: {
			Navigator2,
			NeilModal
		}
	}
</script>

<style lang="scss">
/* 全局样式 */
page {
	background-color: #F1F2F5;
}
</style>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F1F2F5;
		
		.content {
			padding: 16px;
			
			.settings-group {
				background-color: #FFFFFF;
				border-radius: 8px;
				margin-bottom: 32px;
				
				.setting-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20px;
					border-bottom: 1px solid #F3F4F6;
					
					&:last-child {
						border-bottom: none;
					}
					
					.label {
						font-size: 16px;
						color: #1F2937;
					}
					
					.right-content {
						display: flex;
						align-items: center;

						.picker-content {
							display: flex;
							align-items: center;
						}

						.version-badge {
							background-color: #EF4444;
							color: #FFFFFF;
							font-size: 12px;
							padding: 2px 8px;
							border-radius: 12px;
							margin-right: 8px;
						}

						.value {
							font-size: 16px;
							color: #707A89;
							margin-right: 12px;
						}

						.arrow {
							width: 8px;
							height: 14px;
							flex-shrink: 0;
						}
					}
					
					.arrow {
						width: 8px;
						height: 14px;
						flex-shrink: 0;
					}
				}
			}
			
			.logout-section {
				text-align: center;
				
				.logout-button {
					border: none;
					outline: none;
					color: #D94B4B;
					font-size: 14px;
					padding: 12px 16px;
					border-radius: 8px;

					background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
					box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
					
					&::after {
						border: none;
					}
				}
			}
		}
	}
</style>
